<template>
	<view class="content">
		<view class="row b-b">
			<!--<text class="tit">联系人</text>-->
			<input class="input" type="text" v-model="addressData.name" placeholder="姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<!--<text class="tit">手机号</text>-->
			<input class="input" type="number" v-model="addressData.phoneNumber" maxlength="11" placeholder="手机号码" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<!--<text class="tit">身份证</text>-->
			<input class="input" type="text" v-model="addressData.idCard" maxlength="18" placeholder="身份证号" placeholder-class="placeholder" />
		</view>
		
		
		<view class="row default-row" @click="switchChange()">
			<view class="yticon icon-xuanzhong2 checkbox" :class="{checked:addressData.defaultStatus==1}" ></view>
			<text class="tit">设为默认</text>
			<text class="" v-if="type=='edit'" @click="bindClick">删除</text>
			<!--<switch :checked="addressData.defaule" color="#fa436a" @change="switchChange" />-->
		</view>
		<button class="add-btn" @click="confirm">保存</button>
	</view>
</template>

<script>
    import {_addUser,_editUser,_setDefaultUser,_delUser} from '../../common/vmeitime-http/address.js'
    import lotusAddress from "../../components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue";
	export default {
        components:{
            "lotus-address":lotusAddress
        },
		data() {
			return {
				addressData: {
					name: '',
                    phoneNumber: '',
                    idCard:'',
					province:'',
					city:'',
					region:'',
                    detailAddress: '',
                    defaultStatus: 0,
				},
                lotusAddressData:{
                    visible:false,
                    provinceName:'',
                    cityName:'',
                    townName:'',
                },
                selectAddress:'请选择省份、城市、区县',
				type:"add"
			}
		},
		onLoad(options){
			let title = '新增入住人信息';
			if(options.type==='edit'){
				title = '编辑入住人信息';
				this.type = options.type
				this.addressData = JSON.parse(options.data);
				this.selectAddress = `${this.addressData.province} ${this.addressData.city} ${this.addressData.region}`;
				this.lotusAddressData.provinceName = this.addressData.province;
				this.lotusAddressData.cityName = this.addressData.city;
				this.lotusAddressData.townName = this.addressData.region;
			}
			this.manageType = options.type;
			uni.setNavigationBarTitle({
				title
			})
		},
		methods: {
			switchChange(e){
				this.addressData.defaultStatus = this.addressData.defaultStatus===0?1:0;
			},
			
			//地图选择地址
			chooseLocation(){
			    this.openPicker();
// 				uni.chooseLocation({
// 					success: (data)=> {
// 					    console.log(data);
// 						this.addressData.detailAddress = data.address;
// //						this.addressData.address = data.name;
// 					}
// 				})
			},
			
			//提交
			async confirm(){
				let data = this.addressData;
				if(!data.name){
					this.$api.msg('请填写姓名');
					return;
				}
				
				if(data.phoneNumber.length !== 11 && data.phoneNumber.length !== 8){
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				// if(this.selectAddress == "请选择省份、城市、区县"){
				// 	this.$api.msg('请在地图选择所在位置');
				// 	return;
				// }
				// if(!data.detailAddress){
				// 	this.$api.msg('请填写门牌号信息');
				// 	return;
				// }
				// this.addressData.province = this.lotusAddressData.provinceName;
				// this.addressData.city = this.lotusAddressData.cityName;
				// this.addressData.region = this.lotusAddressData.townName;

                let optionStatus = null;
                if(this.manageType=='edit'){
                    optionStatus = await _editUser(this.addressData);
                }else{
                    optionStatus = await _addUser(this.addressData);
                }
                if(optionStatus.data.code==200){
                    if(data.defaultStatus==1){
                        let defaultTemp = null;
                        if(this.manageType=='edit'){
                            defaultTemp = await _setDefaultUser({id:this.addressData.id});
						}else{
                            defaultTemp = await _setDefaultUser({id:optionStatus.data.data});
						}

                        if(defaultTemp.data.code==200){
                            this.$api.msg(`地址${this.manageType=='edit' ? '修改': '添加'}成功`);
                            setTimeout(()=>{
                                //this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
                                this.$api.prePage().refreshList(data, this.manageType);
                                this.$api.prePage().loadData();
                                uni.navigateBack();
                            }, 800)
						}
					}else{
                        this.$api.msg(`地址${this.manageType=='edit' ? '修改': '添加'}成功`);
                        setTimeout(()=>{
                            //this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
                            this.$api.prePage().refreshList(data, this.manageType);
                            this.$api.prePage().loadData();
                            uni.navigateBack();
                        }, 800)
					}

                }
			},
            //打开picker
            openPicker() {
                this.lotusAddressData.visible = true;
                this.lotusAddressData.provinceName = '四川省';
                this.lotusAddressData.cityName = '成都市';
                this.lotusAddressData.townName = '锦江区	';
            },
            //回传已选的省市区的值
            choseValue(res){
                //res数据源包括已选省市区与省市区code
                console.log(res);
                this.lotusAddressData.visible = res.visible;//visible为显示与关闭组件标识true显示false隐藏
                //res.isChose = 1省市区已选 res.isChose = 0;未选
                if(res.isChose){
                    this.lotusAddressData.provinceName = res.province;//省
                    this.lotusAddressData.cityName = res.city;//市
                    this.lotusAddressData.townName = res.town;//区
                    this.selectAddress = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
					// this.addressData.detailAddress = this.region
                }
            },
            async bindClick(){
                let id = this.addressData.id;
                uni.showModal({
                    content: '确定删除吗？',
                    success: async (e)=>{
                        if(e.confirm){
                            let deladdr = await _delUser(id)
                            if(deladdr.data.code==200){
                                this.$api.msg(`删除成功`);
                                setTimeout(()=>{
                                    //this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
                                    this.$api.prePage().loadData();
                                    uni.navigateBack();
                                }, 800)
                            }
                        }
                    }
                })

            }
		}
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
		padding-top: 16upx;
	}

	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30upx;
		height: 110upx;
		background: #fff;
		
		.tit{
			flex-shrink: 0;
			width: 120upx;
			font-size: 26upx;
			color:#989898;
			margin-left: 10upx;
		}
		.input{
			flex: 1;
			font-size: 26upx;
			color: $font-color-dark;
		}
		.icon-shouhuodizhi{
			font-size: 36upx;
			color: $font-color-light;
		}
	}
	.default-row{
		margin-top: 16upx;
		color: #989898;
		font-size: 26upx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16upx) scale(.9);
		}
		.checkbox{
			color: $font-color-disabled;
			background:#fff;
			&.checked{
				color: $uni-color-primary;
			}
		}
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $uni-color-primary;
		border-radius: 10upx;
		position: absolute;
		width: 92%;
		margin-left: 4%;
		bottom: -50upx;

		/*box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);*/
	}
</style>
